<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>状态切换</title>
		<style>
			::-webkit-scrollbar {
				display: none;
			}

			html,
			body {
				overflow: hidden;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="mountNode"></div>
		<script>
			/*Fixing iframe window.innerHeight 0 issue in Safari*/
			document.body.clientHeight;
		</script>
		<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.0.2/build/g6.js"></script>
		<script>
			var nodes = [];
			var edges = [];
			var centerNode = {
				id: 'center',
				x: 500,
				y: 500,
				 shape: 'background-animate',
			  color: '#40a9ff',
			  size: 20,
			  label: '背景动画',
			  labelCfg: {
				position: 'left',
				offset: 10
			  }
			};
			nodes.push(centerNode);

			// 右侧添加 4 个节点
			for (var i = 0; i <10; i++) {
				var _id = 'left' + i;
				nodes.push({
				  id: _id,
				  x: 750,
				  y: i * 100 + 50,
				  shape: 'rect',
				  size: [80, 40],
				  style: {
				  	stroke: 'green',
				  	fill: '#1890ff',
				  	radius: 4
				  },
				  label: '数据库连接数2',
				  textAlign: 'center',
				  textBaseline: 'middle',
				  labelCfg: {
				  	autoRotate: true,
				  	style: {
				  		fill: '#f0f0f0'
				  	}
				  }
				});
				edges.push({
				  source: 'center',
				  target: _id,
				  shape: 'can-running'
				});
			  }
			//   	// 低侧添加 4 个节点
			//   for (var i = 0; i < 6; i++) {
			//   	var _id = 'boot' + i;
			//   	nodes.push({
			//   	  id: _id,
			//   	  x: i * 100 + 50,
			//   	  y:750,
			//   	  shape: 'leaf-node'
			//   	});
			//   	edges.push({
			//   	  source: 'center',
			//   	  target: _id,
			//   	  shape: 'can-running'
			//   	});
			//     }
		//   // 左侧添加 4 个节点
  // for (var i = 0; i < 4; i++) {
  //   var id = 'left' + i;
  //   nodes.push({
  //     id: id,
  //     x: 250,
  //     y: (i + 1) * 100 + 50,
  //     shape: 'leaf-node'
  //   });
  //   edges.push({
  //     source: id,
  //     target: 'center',
  //     shape: 'can-running'
  //   });
  // }
		// 
			// lineDash 的差值，可以在后面提供 util 方法自动计算
			var dashArray = [
				[0, 1],
				[0, 2],
				[1, 2],
				[0, 1, 1, 2],
				[0, 2, 1, 2],
				[1, 2, 1, 2],
				[2, 2, 1, 2],
				[3, 2, 1, 2],
				[4, 2, 1, 2]
			];

			var lineDash = [4, 2, 1, 2];
			var interval = 9;
			G6.registerEdge('can-running', {
				setState: function setState(name, value, item) {
					var shape = item.get('keyShape');
					if (name === 'running') {
						if (value) {
							var length = shape.getTotalLength(); // 后续 G 增加 totalLength 的接口
							var totalArray = [];
							for (var i = 0; i < length; i += interval) {
								totalArray = totalArray.concat(lineDash);
							}
							var index = 0;
							shape.animate({
								onFrame: function onFrame(ratio) {
									var cfg = {
										lineDash: dashArray[index].concat(totalArray)
									};
									index = (index + 1) % interval;
									return cfg;
								},

								repeat: true
							}, 3000);
						} else {
							shape.stopAnimate();
							shape.attr('lineDash', null);
						}
					}
				}
			}, 'cubic-horizontal');
			var graph = new G6.Graph({
				container: 'mountNode',
				width: window.innerWidth,
				height: window.innerHeight,
				edgeStyle: {
					default: {
						stroke: '#b5b5b5'
					}
				}
			});
			graph.data({
				nodes: nodes,
				edges: edges
			});
			graph.render();
			graph.fitView();
			graph.on('node:mouseenter', function(ev) {
				var node = ev.item;
				var edges = node.getEdges();
				edges.forEach(function(edge) {
					return graph.setItemState(edge, 'running', true);
				});
			});

			graph.on('node:mouseleave', function(ev) {
				var node = ev.item;
				var edges = node.getEdges();
				edges.forEach(function(edge) {
					return graph.setItemState(edge, 'running', false);
				});
			});
		</script>
	</body>
</html>
